import React, {  forwardRef } from 'react';
import { Form, Input, Button } from 'antd-mobile'
import './style.css';

interface RegistrationProps {
    registration: (value?: any) => void;
    btnText?: string
}

// 注册页组件
const Registration = forwardRef<RegistrationProps, any>((props, ref: any) => {
    const { registration, btnText } = props;
    return (
        <div className='registration'>
            <div className='title'>
                手机号注册
            </div>
            <Form
                layout='horizontal'
                footer={
                    <Button
                        block
                        type='submit'
                        color='primary'
                        onClick={() => registration && registration()}
                    >
                        {btnText || "提交"}
                    </Button>
                }
                ref={ref}
            >
                <Form.Item
                    name='username'
                    label='手机号'
                    rules={[{ required: true, message: '手机号不能为空' }]}
                >
                    <Input placeholder='请输入手机号' clearable />
                </Form.Item>
                <Form.Item
                    name='password'
                    label='密码'
                    rules={[{ required: true, message: '密码不能为空' }]}
                >
                    <Input placeholder='请输入密码' clearable type='password' />
                </Form.Item>
                <Form.Item
                    name='confirmPassword'
                    label='确认密码'
                    rules={[{ required: true, message: '确认密码不能为空' }]}
                >
                    <Input placeholder='请再次输入密码' clearable type='password' />
                </Form.Item>
            </Form>
        </div>
    )

})
export default Registration;
